<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title> 家計簿　</title>
    <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js"></script>
    <link href="css/account.css" rel="stylesheet" type="text/css">
    <link rel="shortcut icon" href="favicon.ico">
  </head>
<body>
  {% include "_menu.html" %}
  <h3>新規項目</h3>
  <form id="category" action="/addCategory" method="post">
    <input type="text" id="name"  name="name"></input>
    <input type="submit" value="項目追加" onclick="return dataSend()"/>
  </form><hr>
  <div id="categoryList"></div>
</body>
</html>
<script type="text/javascript">
    function dataSend()
    {
      if($F("name")=="")
      {
        alert("項目が入力されていません。");
        return false;
      }
	    var a = new Ajax.Request( 
	        "/addCategory", 
	        { 
	            "method": "post", 
	            "parameters": Form.serialize("category"), 
	            onSuccess: function(request) { 
                $('name').value=""
                setCategories();             
	            }, 
	            onFailure: function(request) { 
	                alert('読み込みに失敗しました'); 
	            }, 
	            onException: function (request) { 
	                alert('読み込み中にエラーが発生しました'); 
	            } 
	        }); 
      return false;
    }
    function setCategoriesData(categories)
    {
      var liStr= '<div><span class="title">項目一覧</span>'
      liStr += '<span class="caution">Drag&amp;Dropで表示の優先順を変更できます。</span><ul id="category_list">';
      for (var i=0 ;i<categories.length;i++)
      {
        var data = categories[i];
        liStr += '<li id="'+data.key+'">';
        liStr += '<form method="post" action="/renewCategory" id="form_category_'+i+'" >';
        liStr += data.name;
        liStr += '<span id="span_category_'+i+'" >';
        liStr += '<input type="button" value="編集" onclick="return editCategory('+i+');" />';
        liStr += '<input type="button" value="削除" onclick=\'return deleteCategory("'+data.key+'");\' />';
        liStr += '</span>';
        liStr += '<span id="category_'+i+'" style="display:none">';
        liStr += '<input type="text" name="name" value="'+data.name+'">';
        liStr += '<input type="hidden" name="key" value="'+data.key+'">';
        liStr += '<input type="button" value="更新" onclick="return renewCategory('+i+');" />';
        liStr += '<input type="button" value="キャンセル" onclick="return cancelCategory('+i+');" />';
        liStr += '</span>';
        liStr += '</form>';
        liStr += '</li>';
      }
      liStr += "</ul>";
      $("categoryList").innerHTML = liStr;
      Sortable.create("category_list",{
          format : /^(.+)$/,
          onUpdate:function(){
              new Ajax.Request(
              '/arrangecategory',
              {
                "method": "post", 
                "parameters":Sortable.serialize("category_list"),
                onFailure: function(request) { 
                  alert('並び替えの更新に失敗しました'); 
                } 
              });
         }
    });
    }
    function renewCategory(i)
    {
      $('form_category_'+i).submit();
    }
    function cancelCategory(i)
    {
      $('category_'+i).hide();
      $('span_category_'+i).show();
    }
    function editCategory(i)
    {
      $('span_category_'+i).hide();
      $('category_'+i).show();
    }
    function setCategories()
    {
	    var a = new Ajax.Request( 
	        "/categories.json", 
	        { 
	            "method": "get", 
              "parameters":makeTemporaryQuery(),
	            onSuccess: function(request) { 
                var clean = request.responseText.gsub(/</,"&lt;").gsub(/>/,"&gt;").gsub(/'/,"&apos;");
                var dataSet = clean.evalJSON(true);
                setCategoriesData(dataSet);
	            }, 
	            onFailure: function(request) { 
	                alert('読み込みに失敗しました'); 
	            }, 
	            onException: function (request) { 
	                alert('読み込み中にエラーが発生しました'); 
	            } 
	        }); 
    }
    function deleteCategory(key)
    {
	    var a = new Ajax.Request( 
	        "/deleteCategory", 
	        { 
	            "method": "post", 
              "parameters": "key="+key, 
	            onSuccess: function(response) { 
                setCategories();             
	            }, 
	            onFailure: function(response) { 
                if(response.status==403){
                  alert(response.responseText);
                }else
                {
	                alert('読み込みに失敗しました'); 
                }
	            }, 
	            onException: function (request) { 
	                alert('読み込み中にエラーが発生しました'); 
	            } 
	        }); 
      return false;
    }
  document.observe('dom:loaded',function(){
    setCategories();
    $('name').select();
    });
</script>
